export const option = {
    tooltip: {
        position: 'top',
        formatter:function (params) {
            const xValue=params.value[0].split('-')[0]
            // 默认内容格式（标题）
            let content = params.seriesName + '<br/>'+`
                    ${params.marker}
                    <span>${xValue}</span>:
                    ${params.value[2]}
                    <br/>
                `;
            return content;
        }
    },
    grid: {
        height: "70%",
        width: "80%",
        right: "10%",
        top: "15%",
    },
    xAxis: {
        type: 'category',
        data: [],
        splitArea: {
            show: true
        },
        axisLabel: {
            show: false // Hide x-axis labels
        },
        axisTick: {
            show: false // Hide x-axis ticks
        }
    },
    yAxis: {
        type: 'category',
        data: [],
        splitArea: {
            show: true
        },
        axisLabel: {
            show: false // Hide y-axis labels
        },
        axisTick: {
            show: false // Hide y-axis ticks
        }
    },
    dataZoom: [
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 0,
            end: 2,
            bottom: '5%',
            showDetail: true,
            labelFormatter: (value) => {
                console.log(value);
                return 1;
            },
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            start: 10,
            end: 22,
            left: '2%',
            orient: 'vertical'
        },
        //下面是配置能否滚轮缩放
        {
            type: 'inside',
            xAxisIndex: [0]
        },
        {
            type: 'inside',
            yAxisIndex: [0]
        }
    ],
    visualMap: {
        min: -20,
        max: 80,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        top: '0%',
        // 灰蓝色渐变配置
        inRange: {
            color: ["rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(43,140,190)", "rgb(4,90,141)"],
            // 可选：控制颜色过渡的平滑度
            // colorSaturation: [0.3, 0.8],
            // symbolSize: [10, 50]
        },
        // 可选：文本标签样式
        textStyle: {
            color: '#333'
        }
    },
    series: [
        {
            name: 'Feature_Vector',
            type: 'heatmap',
            data: [],
            // emphasis: {
            //     itemStyle: {
            //         shadowBlur: 10,
            //         shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            // },
            itemStyle: {
                // color: "#ff0000", // 设置格子的颜色
                borderWidth: 1, // 设置格子的边框宽度
                borderColor: "#ffffff", // 设置格子的边框颜色
            },
        }
    ]
};
